<template>
    <el-form ref="loginForm" :model="loginFormData" status-icon :rules="commonRules" label-width="120px"
        class="demo-loginFormData">
        <el-form-item label="账号" prop="username" class="number1">
            <el-input v-model="loginFormData.username" type="text" autocomplete="off" maxlength="16" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginFormData.password" type="password" autocomplete="off" maxlength="16" />
        </el-form-item>
        <el-form-item label="验证码" prop="captcha" class="captcha">
            <el-input v-model="loginFormData.captcha" class="captcha78787" maxlength="5"
                @keydown.enter="submitForm(loginForm)" />
            <div class="captchaBox" v-html="captcha" @click="getCaptcha" v-loading="loading"></div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(loginForm)">登录</el-button>
        </el-form-item>
    </el-form>
    <!-- <video src="../../assets/video/window.mp4" muted="muted" loop="loop" autoplay="autopl"></video> -->
</template>

<script setup>
import * as api from "@/api/users"
import { reactive, ref, onMounted, watchEffect, onUnmounted } from 'vue'
//引入校验函数
import { validatePassword, validateUsername, validateCaptcha, commonRules, useSubmitForm } from "../../composition/login/validate";
//引入loading加载框
import { ElLoading } from 'element-plus'
//引入store
import { useUser } from "@/store/users"
//引入路由对象
import { useRouter } from "vue-router"
//使用路由对象
let router = useRouter()
//使用store
let userStore = useUser()
//表单校验成功之后回调的方法
let validateSuccess = () => {
    //发起登入请求
    //1.登入请求之前先要检验验证码，验证码统一转换成小写
    verifyCaptcha(loginFormData.captcha.toLowerCase())
    console.log('检验成功');
}
//表单校验失败，回调的方法
let validateFailed = () => {
    console.log('校验失败');

}


let submitForm = useSubmitForm(validateSuccess, validateFailed)
const loginForm = ref()
//检验验证码

const loginFormData = reactive({
    username: '',
    password: '',
    captcha: '',
})
//声明一个展示验证码的响应式变量
let captcha = ref()
//控制loading的显示与隐藏
let loading = ref(true)
//获取验证码
let getCaptcha = async () => {
    loading.value = true
    let res = await api.getCaptchaApi()
    if (res.data.state) {
        captcha.value = res.data.img
        loading.value = false
    }
}
//校验验证码
//1.本地的表单校验通过之后
//2.通过接口校验验证码
//3.声明loadingInstance,用户存储loading动画实例
let loadingInstance = null;
let verifyCaptcha = async captcha => {
    //发起登入请求的时候就要加载loading的加载框
    loadingInstance = ElLoading.service({
        text: "正在登陆...",
        background: 'rgba(0,0,0,.4)'
    })
    try {
        let res = await api.verifyCaptchaApi(captcha)
        //表示验证码校验通过
        //发起登入请求
        login(loginFormData.username, loginFormData.password)
    } catch (e) {
        //验证码校验失败，需要重新刷新一个新的验证码
        console.log(e);
        getCaptcha()
        //关闭loading加载动画框
        loadingInstance.close()
    }


}

//用户名密码登录逻辑
/**
 * @param   {String} username
 * @param {String} password
 */
let login = async (username, password) => {
    //调用登入请求接口
    try {
        let res = await api.loginApi(username, password)
        //存储token，存到sessionStorage
        sessionStorage.setItem('my-token', res.data.token)
        //存储用户信息
        userStore.$patch({
            userInfo: res.data.userInfo
        })
        //登入成功需要跳转页面，跳到首页
        router.push("/")

    } catch (e) {
        //登陆失败也要关掉loading加载动画框
        loadingInstance.close()
        console.log(e);
    }
}
onUnmounted(() => {
    //关掉loading加载动画框
    loadingInstance && loadingInstance.close()
})

//首次加载页面调用
onMounted(() => {
    getCaptcha()

})

watchEffect(() => {
    console.log(loginFormData);
})
</script>



<style lang="scss" scoped>
//最外层的box
.el-form {
    :deep(.el-form-item__label) {
        color: white
    }

    //内层输入框
    .el-input {
        width: 200px;
    }

    //内层第一个
    .number1 {
        margin-top: 50px;
    }
}

//短信登录按钮的样式



.captcha {
    .el-input {
        width: 90px;

    }

    :deep(.el-input__wrapper) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0;
        box-shadow: none;
    }
}

.captchaBox {
    box-shadow: none;
    height: 32px;
    width: 110px;
    // box-shadow: 0 0 0 1px #dcdfe6;
    transition: var(--el-transition-box-shadow);
    background-color: white;
    border-left: 0;
    border-radius: 0 4px 4px 0;

    :deep(svg) {
        height: 32px;
        width: 110px;
    }
}

// :deep(.el-form-item__label){
//         color:white
//     }
</style>
